<template>
  <div class="panel">
    <aside>
      <ul class="outsideList">
        <li>
          <router-link to="/platform">
            <p>平台展示页</p>
          </router-link>
        </li>
        <li>
          <p>职员模块</p>

          <ul class="insideList">
            <li>
              <router-link to="/panel/role">职员管理</router-link>
            </li>
            <li>
              <router-link to="/panel/menu">部门管理</router-link>
            </li>
            <li>
              <router-link to="/panel/resource">权限管理</router-link>
            </li>
          </ul>
        </li>
        <li>
          <p>客户模块</p>

          <ul class="insideList">
            <li>
              <router-link to="/panel/customer">客户列表</router-link>
            </li>
            <li>
              <router-link to="/panel/returnvisit">回访列表</router-link>
            </li>
            <li>
              <router-link to="/panel/sign">已报名列表</router-link>
            </li>
          </ul>
        </li>
        <li>
          <p>反馈</p>
        </li>
      </ul>
    </aside>

    <section>
      <header>
        我是头部
        <button @click="quit">注销</button>
      </header>
      <main>
        <router-view></router-view>
      </main>
    </section>
  </div>
</template>

<script>
export default {
  methods: {
    quit() {
      localStorage.clear();
      this.$router.push("/");
    },
  },
};
</script>

<style lang="scss" scoped>
.panel {
  display: flex;
  width: 100vw;
  height: 100vh;

  aside {
    width: 250px;
    border-right: 1px solid grey;

    .outsideList {
      > li {
        text-align: center;

        p {
          line-height: 5em;
          cursor: pointer;
          transition: all 0.2s;

          &:hover {
            background-color: #e9eef3;
            color: #fff;
          }
        }

        .insideList {
          li a {
            display: block;
            line-height: 3em;
            color: grey;
            transition: all 0.2s;

            &:hover {
              color: #e9eef3;
              background-color: grey;
            }
          }
        }
      }
    }
  }

  section {
    flex: 1;
    background-color: #e9eef3;

    header {
      height: 80px;
      line-height: 80px;
      text-align: center;
      background-color: #fff;
    }
  }
}
</style>
